
<template>
  <div>
    <v-header></v-header>
	  <div class="ris_p_menu_cont">
	    <div class="ris_cont ris_cont1">
	        <!--<div class="ris_cont_headNav">系统设置&gt;权限管理&gt;按钮权限设置</div>-->
	        <div class="ris_cont_headHint">菜单权限设置
            <router-link :to="{ name: 'RoleSetting', params: {}}" ><span class="ris_cont_headHint_btn">返回</span></router-link>
          </div>
	        <!--内容-->
	        <div class="ris_p_cont clear">
	            <!--左边-->
	            <div class="ris_p_cont_left">
	                <p class="ris_p_cont_left_head">菜单名称</p>
	                <ul class="ris_btn_cont_left_ul">
                      <!--第一级-->
	                    <li v-for="item in selectedMenu">
	                        <a class="ris_btn_cont_left_ul_a" @click.self="item.showMenu2=!item.showMenu2" @dblclick="deleteMenu(item.code)">{{item.title}}</a>
	                        <ul v-show="item.showMenu2">
                              <!--第二级-->
	                            <li v-for="item2 in item.children">
                                <a class="ris_btn_cont_left_ul_a" @click.self="item2.showMenu3=!item2.showMenu3" @dblclick="deleteMenu(item2.code)" >{{item2.title}}</a>
                                <ul v-show="item2.showMenu3">
                                  <!--第三级-->
                                  <li v-for="item3 in item2.children">
                                    <a class="ris_btn_cont_right_ul_a" @dblclick="deleteMenu(item3.code)">{{item3.title}}</a>
                                  </li>
                                </ul>
                              </li>
	                        </ul>
	                    </li>
	                </ul>
	            </div>
	            <!--中间-->
	            <div class="ris_p_cont_center">
	                <button class="ris_btn_cont_center_right button">&lt;</button>
	                <button class="ris_btn_cont_center_left button">&gt;</button>
	            </div>
	            <!--右边-->
	            <div class="ris_p_cont_right">
	                <p class="ris_p_cont_right_head">可选菜单名称</p>
	                <ul class="ris_btn_cont_right_ul">
	                    <li v-for="item in notSelectMenu">
	                        <a href="#" class="ris_btn_cont_right_ul_a" @click.self="item.showMenu2=!item.showMenu2" @dblclick="addMenu(item.code)" >{{item.title}}</a>
	                        <ul v-show="item.showMenu2">
	                            <li v-for="item2 in item.children">
                                <a class="ris_btn_cont_right_ul_a" :style="item2.id==activedR.id?{background:'#ddd'}:{}" @click.prevent="activedR=item2" @click.self="item2.showMenu3=!item2.showMenu3" @dblclick="addMenu(item2.code)">{{item2.title}}</a>
                                <ul v-show="item2.showMenu3">
                                  <li v-for="item3 in item2.children">
                                    <a class="ris_btn_cont_right_ul_a" :style="item3.id==activedR.id?{background:'#ddd'}:{}" @click.prevent="activedR=item3" @dblclick="addMenu(item3.code)">{{item3.title}}</a>
                                  </li>
                                </ul>
                              </li>
	                        </ul>
	                    </li>
	                </ul>
	            </div>
	        </div>
	    </div>
	</div>
  </div>
</template>




<script>
  import Header from '@/components/Header/Header';
  import {getSelectedMenu, getNotSelectedMenu, deleteMenu, addMenu} from '@/api/settings';

	export default {
	    name: 'hello',
      components: {
        'v-header': Header
      },
      data() {
          return {
            showMenu2: false,
            showMenu3: false,
            id: '',
            selectedMenu: '',
            notSelectMenu: '',
            activedR: '',
            activedL: '',
          }
      },
	    // props:{
	    //     root:Object
	    // },
	    created(){
	      this.id = this.$route.query.id
        return new Promise((resolve, reject) => {
          //获取已选列表
          getSelectedMenu(this.id).then(response => {
            for(var i in response.data){
              response.data[i].showMenu2 = false;
              if (response.data[i].children != undefined) {
                for (var j in response.data[i].children) {
                  response.data[i].children[j].showMenu3 = false;
                }
              }
            }
            this.selectedMenu = response.data;
            resolve()
          }).catch(error => {
            reject(error)
          });
          //获取未选列表
          getNotSelectedMenu(this.id).then(response => {

            for(var i in response.data){
              response.data[i].showMenu2 = false;
              if (response.data[i].children != undefined) {
                for (var j in response.data[i].children) {
                  response.data[i].children[j].showMenu3 = false;
                }
              }
            }
            this.notSelectMenu = response.data;
            resolve()
          }).catch(error => {
            reject(error)
          });

        })
	    },
	    mounted(){
	    },
	    methods:{
        //删除已选
        deleteMenu(code) {
          deleteMenu(this.id, code).then(response => {
            this.refreshMenu();
          })
        },
        //添加菜单
        addMenu(code) {
          addMenu(this.id, code).then(response => {
            this.refreshMenu();
          })
        },
        refreshMenu() {
          //获取已选列表
          getSelectedMenu(this.id).then(response => {
            for(var i in response.data){
              response.data[i].showMenu2 = false;
              if (response.data[i].children != undefined) {
                for (var j in response.data[i].children) {
                  response.data[i].children[j].showMenu3 = false;
                }
              }
            }
            this.selectedMenu = response.data;
          })
          //获取未选列表
          getNotSelectedMenu(this.id).then(response => {

            for(var i in response.data){
              response.data[i].showMenu2 = false;
              if (response.data[i].children != undefined) {
                for (var j in response.data[i].children) {
                  response.data[i].children[j].showMenu3 = false;
                }
              }
            }
            this.notSelectMenu = response.data;
          })
        },
	    },
  }

</script>

<style scoped>
    .ris_cont_headHint{
        height: 40px;
        background-color: #999;
        color: #f1f1f1;
        line-height: 40px;
        padding-left: 30px;
        box-sizing: border-box;
    }

	 .ris_cont1{
            background: #fff;
        }
        .ris_p_button{
            position: fixed;
            width: 100%;
            height: 100%;
            left: 0;
            top: 0;
            display: none;
        }
        .ris_p_cont{
            /*width: 80%;*/
            margin: 15px auto;
        }
        /*左边*/
        .ris_p_cont_left{
            float: left;
            width: 40%;
        }
        .ris_p_cont_left_head{
            line-height: 44px;
            background-color: #a0a0a0;
            padding-left: 30px;
            font-size: 14px;
            font-weight: bold;
            color: #fff;
        }
        /*列表样式*/
        .ris_btn_cont_left_ul{
            line-height: 32px;
            width: 100%;
            height: 583px;
            overflow-x: hidden;
            border: 1px solid #2578ad;
            border-top: 0;
            overflow-y: auto;
            background-color: #fff;
            box-sizing: border-box;
            -webkit-box-sizing: border-box;
        }
        .ris_btn_cont_left_ul li{
            cursor: pointer;
            width: 100%;
        }
        .ris_btn_cont_left_ul li a{
            display: block;
            width: 100%;
            height: 100%;
            /*border-bottom: 1px solid #fff;*/
            opacity: 0.9;
        }
        .ris_btn_cont_left_ul li a:hover{
            opacity: 1.5;
        }
        .ris_btn_cont_left_ul>li>a{
            padding-left: 30px;
            background-color: #215c84;
            border-bottom: 1px solid #fff;
            color: #fff;
            /*border-top: 1px solid #aaa;*/
        }
        .ris_btn_cont_left_ul>li>ul>li>a{
            padding-left: 60px;
            background-color: #fff;
            border-bottom: 1px solid #ccc;
            color: #666;
        }
        .ris_btn_cont_left_ul>li>ul{
            /*display: none;*/
        }
        .ris_btn_cont_left_ul>li>ul>li>ul{
            /*display: none;*/
        }
      .ris_btn_cont_left_ul>li>ul>li>ul>li>a{
        padding-left: 90px;
        background-color: #fff;
        border-bottom: 1px solid #ccc;
        color: #666;
      }
        /*a.ris_tm_cont_left_ul_active{*/
        /*color: #ffb53e !important;*/
        /*}*/
        /*中间*/
        .ris_p_cont_center{
            float: left;
            width: 20%;
            text-align: center;
        }
        .ris_p_cont_center button{
            margin-top: 150px;
            width: 70%;
            height: 40px;
            border: 0;
            border-radius: 18px;
            color: #fff;
            cursor: pointer;
            font-size: 26px;
            line-height: 40px;
            background: #32a2e2;
        }
        .ris_p_cont_center button:hover{
            background: #4f94cd;
        }


        /*右边*/
        .ris_p_cont_right{
            float: right;
            width: 40%;
        }
        .ris_p_cont_right_head{
            line-height: 44px;
            background-color: #a0a0a0;
            padding-left: 30px;
            font-size: 14px;
            font-weight: bold;
            color: #fff;
        }
        .ris_btn_cont_right_ul{
            line-height: 32px;
            width: 100%;
            height: 583px;
            overflow-x: hidden;
            border: 1px solid #2578ad;
            border-top: 0;
            overflow-y: auto;
            background-color: #fff;
            box-sizing: border-box;
            -webkit-box-sizing: border-box;
        }
        .ris_btn_cont_right_ul li{
            cursor: pointer;
            width: 100%;
        }
        .ris_btn_cont_right_ul li a{
            display: block;
            width: 100%;
            height: 100%;
            /*border-bottom: 1px solid #fff;*/
            opacity: 0.9;
        }
        .ris_btn_cont_right_ul li a:hover{
            opacity: 1.5;
        }
        .ris_btn_cont_right_ul>li>a{
            padding-left: 30px;
            background-color: #215c84;
            border-bottom: 1px solid #fff;
            color: #fff;
            /*border-top: 1px solid #aaa;*/
        }
        .ris_btn_cont_right_ul>li>ul>li>a{
            padding-left: 60px;
            background-color: #fff;
            border-bottom: 1px solid #ccc;
            color: #666;
        }
      .ris_btn_cont_right_ul>li>ul>li>ul>li>a{

        padding-left: 90px;
        background-color: #fff;
        border-bottom: 1px solid #ccc;
        color: #666;
      }
        .ris_btn_cont_right_ul>li>ul{
            /*display: none;*/
        }
        .ris_btn_cont_right_ul>li>ul>li>ul{
            /*display: none;*/
        }
        .ris_btn_cont_left_ul_a_active{
            color: #fa0002 !important;
        }
        .ris_btn_cont_right_ul_a_active{
            color: #fa0002 !important;
        }
        .ris_cont_headHint_btn{
            display: inline-block;
            float: right;
            padding: 0 30px;
            cursor: pointer;
            font-size: 14px;
            color: #ffac0e;
        }
        .ris_cont_headHint_btn:hover{
            color: #ff0;
        }

</style>
